<template>
  <div style="width:100%;">
    <el-container>
      <el-header>
        {{tt}}
      </el-header>
      <el-main style="height:100%;width:50%;">
       <el-row :gutter="15">
      <el-form ref="naming" :model="formData" :rules="rules" size="medium" label-width="100px">
         <input type="number" v-model.number="formData.id" hidden />
        <el-col :span="20">
          <el-form-item label="规范名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入规则名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="适用对象" prop="applyObject">
            <el-select v-model="formData.applyObject" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="item in applyObjectOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="规范内容" prop="ruleContent">
            <el-input v-model="formData.ruleContent" type="textarea"
              placeholder="请输入规则内容，例如，以ODS_$[dbld]_$[levelld]_YYYYMMDD,表名能符合ODS+数据库名+层次+YYYYMMDD这样的格式方可通过校验。$[xxx]为平台内置的可选择的维度"
              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="名字最大长度" prop="maxNameLength">
            <el-input v-model="formData.maxNameLength" placeholder="请输入名字最大长度" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="备注说明" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入备注说明" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button @click="resetForm">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
     tt : "新建命名规范",
     naming:this.$route.params.naming,
     formData: {
        id:null,
        name: '',
        applyObject: '',
        ruleContent: '',
        maxNameLength: '',
        remark: '',
      },
      rules: {
        name: [{
          required: true,
          message: '请输入规则名称',
          trigger: 'blur'
        }],
         applyObject: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        ruleContent: [],
        maxNameLength: [],
        remark: [],
      },
      applyObjectOptions: [{
        "label": "物理模型",
        "value": '0'
      }, {
        "label": "物理模型属性",
        "value": '1'
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
   mounted() {
    if(this.naming){
      debugger
      this.tt = "编辑命名规范";
      this.formData = this.naming;
    }else{
      this.tt = "新建命名规范";
    }
  },
  methods: {
    submitForm() {
      console.log(999);
      var _this = this;
      this.$refs['naming'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        if(_this.formData.id){
          _this.axios
          .post(this.HOST + "/update", {
            id:_this.formData.id,
            name: _this.$refs['naming'].model.name,
            applyObject:  _this.$refs['naming'].model.applyObject,
            ruleContent:  _this.$refs['naming'].model.ruleContent,
            maxNameLength: _this.$refs['naming'].model.maxNameLength,
            remark: _this.$refs['naming'].model.remark,
          })
          .then(function(res) {
            if(res.data){
              _this.$router.push("/");
            }
          })
          .catch(function(err) {
            console.log(err);
          });
        }else{
           _this.axios
          .post(this.HOST + "/exist", {
              name: _this.$refs['naming'].model.name,
          })
          .then(function(res) {
            if(res.data.data){
                 _this.$confirm('规则名称已经存在?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true,
                    showCancelButton:false,
                  })
              }else{
                 _this.axios
                .post(_this.HOST + "/add", {
                    name: _this.$refs['naming'].model.name,
                    applyObject:  _this.$refs['naming'].model.applyObject,
                    ruleContent:  _this.$refs['naming'].model.ruleContent,
                    maxNameLength: _this.$refs['naming'].model.maxNameLength,
                    remark: _this.$refs['naming'].model.remark,
                })
                .then(function(res) {
                  if(res.data){
                    _this.$router.push("/");
                  }
                })
                .catch(function(err) {
                  console.log(err);
                });
              }
          })
          .catch(function(err) {
            console.log(err);
          });
        }
      })
    },
    resetForm() {
      this.$router.push("/");
    },
  },
  watch:{}
}

</script>
<style>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
</style>
